<template>
	<div>
		<el-row>
			<!-- 步骤条 -->
			<el-col :span="24">
				<el-steps :active="step" finish-status="success" align-center style="width:90%;margin:20px auto">
					<el-step title="基本信息"></el-step>
					<el-step title="规格属性"></el-step>
					<el-step title="SKU信息"></el-step>
					<el-step title="商品介绍"></el-step>
					<el-step title="关联专题"></el-step>
					<el-step title="保存完成"></el-step>
				</el-steps>
			</el-col>
			<!-- 第一步 商品基本信息 -->
			<el-col :span="24" v-show="step==0">
				<el-card class="box-card" style="width:85%;margin:20px auto">
					<el-form ref="spuBaseForm" :model="spuForm" label-width="120px" :rules="spuBaseInfoRules">
						<el-form-item label="商品名称" prop="spuName">
							<el-input class="input-box" v-model="spuForm.spuName"></el-input>
						</el-form-item>
						<el-form-item label="商品描述" prop="spuCaption">
							<el-input class="input-box" v-model="spuForm.spuCaption" ></el-input>
						</el-form-item>
						<el-form-item label="商品分类" prop="categoryCode">
							<el-cascader
								style="width:30%"
								:options="returnData.categoryOptions"
								:props="categorySetting"
								v-model="categoryCodeArray"
								clearable
							>
							</el-cascader>
						</el-form-item>
						<el-form-item label="商品品牌" prop="brandCode">
							<el-select v-model="spuForm.brandCode" class="input-width" placeholder="全部" clearable filterable style="width:30%">
								<el-option v-for="item in returnData.brandOptions"
									:key="item.brandCode"
									:label="item.brandName"
									:value="item.brandCode">
								</el-option>
							</el-select>
							<template v-if="showAddRelationButton" >
								<el-button type="info" icon="el-icon-plus" style="margin-left:10px"></el-button>
							</template>
						</el-form-item>
						<el-form-item label="商品重量(g)" prop="goodsWeight">
							<el-input-number v-model.number="spuForm.goodsWeight" :min="0"  :step="1"></el-input-number>
						</el-form-item>
						<el-form-item label="赠送积分" prop="bounds">
							<el-input-number
								placeholder="赠送积分"
								v-model.number="spuForm.bounds.integral"
								:min="0"
								:step="1"
							></el-input-number>
							<label style="margin-left:30px">赠送成长值</label>
							<el-input-number
								style="margin-left:15px"
								placeholder="赠送成长值"
								v-model.number="spuForm.bounds.growthValue"
								:min="0"
								:step="1"
							>
							<template slot="prepend">赠送成长值</template>
							</el-input-number>
						</el-form-item>
						<el-form-item label="商品价格" prop="goodsPrice">
							<el-input class="input-box" v-model="spuForm.goodsPrice"></el-input>
						</el-form-item>
						<el-form-item label="计量单位" prop="goodsUnit">
							<el-input class="input-box" v-model="spuForm.goodsUnit"></el-input>
						</el-form-item>
						<el-form-item label="上架/下架" prop="isMarketable">
							<el-radio-group v-model="spuForm.isMarketable">
								<el-radio :label="1">上架</el-radio>
								<el-radio :label="2">下架</el-radio>
							</el-radio-group>
						</el-form-item>
						
						<el-form-item label="商品图集" prop="rotateImageList">
							<multiple-upload 
								:uploadType="uploadSetting.uploadType" 
								v-model="spuForm.rotateImageList"
								:maxCount="uploadSetting.maxUploadCount"
								:maxSize="uploadSetting.maxUploadSize"
								:acceptType="uploadSetting.uploadAcceptType"
							>
							</multiple-upload>
						</el-form-item>
						<el-form-item>
							<el-button type="success" @click="collectSpuBaseInfo">下一步：设置规格属性</el-button>
						</el-form-item>
					</el-form>
				</el-card>
			</el-col>
			<!-- 第二步 商品规格属性 -->
			<el-col :span="24" v-show="step==1">
				<el-card class="box-card" style="width:85%;margin:20px auto">
					<el-tabs v-model="activeName" >
						<el-tab-pane label="规格参数" name="paramters">
							<el-form ref="form" :model="spuForm">
								<el-form-item :label="parameters.paramsName" v-for="(parameters,pidx) in returnData.paramsOptions" :key="parameters.id">
									<el-select
										v-model="returnData.paramsOptions[pidx].paramsValue"
										filterable
										allow-create
										default-first-option
										placeholder="请选择或输入值"
									>
									<el-option
										v-for="(val,pvidx) in getParamInputList(parameters.options)"
										:key="pvidx"
										:label="val"
										:value="val"
									></el-option>
									</el-select>
								</el-form-item>
							</el-form>
						</el-tab-pane>
						<el-tab-pane label="规格属性" name="specs">
							<el-form ref="saleform" :model="spuForm">
								<el-form-item :label="spec.specName" v-for="(spec,sidx) in returnData.specOptions" :key="spec.id">
									<el-checkbox-group v-model="returnData.tempSpecOptions[sidx].specValue">
										<el-checkbox 
											v-for="val in getSpecInputList(spec.options)"
											:label="val"
											:key="val"
										>
										</el-checkbox>
										<div style="margin-left:20px;display:inline">
											<el-button
												v-show="!inputVisible[sidx].view"
												class="button-new-tag"
												size="mini"
												@click="showInput(sidx)"
											>+自定义</el-button>
											<el-input
												v-show="inputVisible[sidx].view"
												v-model="inputValue[sidx].val"
												:ref="'saveTagInput'+sidx"
												size="mini"
												style="width:150px"
												@keyup.enter.native="handleInputConfirm(sidx)"
												@blur="handleInputConfirm(sidx)"
											></el-input>
										</div>
									</el-checkbox-group>
								</el-form-item>
							</el-form>
						</el-tab-pane>
					</el-tabs>
					<el-button type="primary" @click="step = 0">上一步</el-button>
					<el-button type="success" @click="generateSkus">下一步：设置SKU信息</el-button>
				</el-card>
			</el-col>
			<!-- 第三步 商品sku信息 -->
			<el-col :span="24" v-show="step==2">
				<el-card class="box-card" style="width:85%;margin:20px auto">
					<el-table :data="spuForm.skuList" style="width: 100%" minheight="calc(100VH - 270px)" highlight-current-row border >
						<el-table-column label="属性组合">
							<el-table-column
								:label="item.specName"
								v-for="(item,index) in returnData.skuTableColumn"
								:key="item.specId"
							>
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.descar[index] }}</span>
							</template>
							</el-table-column>
						</el-table-column>
						<el-table-column label="商品名称" prop="skuName">
							<template slot-scope="scope">
								<el-input v-model="scope.row.skuName"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="标题" prop="skuTitle">
							<template slot-scope="scope">
								<el-input v-model="scope.row.skuTitle"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="副标题" prop="skuSubtitle">
							<template slot-scope="scope">
								<el-input v-model="scope.row.skuSubtitle"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="价格" prop="goodsPrice">
							<template slot-scope="scope">
								<el-input v-model="scope.row.goodsPrice"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="商品库存" prop="stockNum">
							<template slot-scope="scope">
								<el-input v-model="scope.row.stockNum"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="预警库存" prop="alertStockNum">
							<template slot-scope="scope">
								<el-input v-model="scope.row.alertStockNum"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="条形码" prop="goodsBarCode">
							<template slot-scope="scope">
								<el-input v-model="scope.row.goodsBarCode"></el-input>
							</template>
						</el-table-column>
						<!-- 折叠信息内容 可进行修改-->
						<el-table-column type="expand">
							<template slot-scope="scope">
								<el-row>
									<!-- 商品表单基础信息-->
									
									<!-- 商品图品信息-->
									<el-col :span="24">
										<div v-for="(img,index) in scope.row.skuRotateImageList" :key="index" class="aaa" style="float: left;">
											<img class="el-upload-list__item-thumbnail ddd" :src="img.imgUrl" alt="">
											<label class="corner-marker" v-if="(img.defaultImg == 1)">
												<i class="corner-marker-image"></i>
											</label>
											<!-- 遮罩层 -->
											<a href="#">
												<div class="image-mask">
													<span class="add" @click="setDefalutImage(img,index,scope.row.skuRotateImageList)">
														<i class="el-icon-s-flag"></i>
													</span>
													<span class="delete" @click="removeImage(index,scope.row.skuRotateImageList)">
														<i class="el-icon-delete"></i>
													</span>
												</div>
											</a>
										</div>
										<div v-if="(scope.row.skuRotateImageList.length < uploadSetting.maxUploadCount)" @click="up(scope.$index,scope.row.skuRotateImageList)" ref="sku-img-upload">
											<multiple-upload
												style="float: left;"
												:uploadType="uploadSetting.uploadType" 
												v-model="skuUploadImageList"
												:show-file-list="false"
												:acceptType="uploadSetting.uploadAcceptType"
												:uploadSuccessdelete="true"
											>
											</multiple-upload>
										</div>
									</el-col>
								</el-row>
							</template>
						</el-table-column>
					</el-table>
					<el-divider></el-divider>
					<el-button type="primary" @click="step = 1">上一步</el-button>
					<el-button type="success" @click="generateSpuInfo">下一步：商品介绍</el-button>
				</el-card>
			</el-col>
			<!-- 第四步 商品描述,详细信息,可为图片,可为图文结合-->
			<el-col :span="24" v-show="step==3">
				<el-card class="box-card" style="width:85%;margin:20px auto">
					<el-form :model="spuForm" ref="goodsInfoForm">
						<el-form-item label="商品描述类型" prop="spuInfoType">
							<el-radio-group v-model="spuForm.spuInfoType">
								<el-radio :label="1">图集</el-radio>
								<el-radio :label="2">富文本</el-radio>
							</el-radio-group>
						</el-form-item>
						<div v-if="(spuForm.spuInfoType == 1)">
							<el-form-item label="商品描述" prop="spuInfoImage">
								<el-row>
									<!-- 商品图品信息-->
									<el-col :span="24">
										<draggable
											v-model="spuForm.spuInfoImage"
											class="list-group"
											tag="ul"
											v-bind="dragOptions"
											@start="drag = true"
											@end="drag = false"
										>
										<div v-for="(img,index) in spuForm.spuInfoImage" :key="index" class="aaa" style="float: left;">
											<img class="el-upload-list__item-thumbnail ddd" :src="img" alt="">
											<!-- 遮罩层 -->
											<a href="#">
												<div class="image-mask">
													<span class="add" @click="viewSpuInfoImage(img)">
														<i class="el-icon-view"></i>
													</span>
													<span class="delete" @click="removeSpuInfoImage(index)">
														<i class="el-icon-delete"></i>
													</span>
												</div>
											</a>
											<el-dialog :visible.sync="dialogImageVisible">
												<img width="100%" :src="dialogImageUrl" alt="">
											</el-dialog>
										</div>
										</draggable>
										<div v-if="(spuForm.spuInfoImage.length < uploadSetting.spuInfoMaxUploadCount)" >
											<multiple-upload
												style="float: left;"
												:uploadType="uploadSetting.uploadType" 
												v-model="spuInfoUploadImageList"
												:show-file-list="false"
												:acceptType="uploadSetting.uploadAcceptType"
												:uploadSuccessdelete="true"
											>
											</multiple-upload>
										</div>
									</el-col>
								</el-row>
							</el-form-item>
						</div>
						<div v-else>
							<el-form-item prop="spuInfoHtml">
								<Editor 
									v-model="spuForm.spuInfoHtml" 
									:acceptType="uploadSetting.uploadAcceptType"
									:uploadType="uploadSetting.uploadType" 
								/>
							</el-form-item>
						</div>
					</el-form>
					<el-divider></el-divider>
					<el-button type="primary" @click="step = 2">上一步</el-button>
					<el-button type="success" @click="saveGoods">下一步：保存商品</el-button>
				</el-card>
			</el-col>
			<el-col :span="24" v-show="step==4">
				<el-card class="box-card" style="width:85%;margin:20px auto">
					<h1>保存成功</h1>
					<el-divider></el-divider>
					<el-button type="success" @click="addAgian">继续添加</el-button>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import { findCategoryTree } from '@/api/mall/goodsCategory'
import { findRelationBrandCategoryList } from '@/api/mall/goodsBrandCategory'
import { findTemplateRelationInfo } from '@/api/mall/goodsTemplate'
import { addGoods } from '@/api/mall/goods'
import MultipleUpload from '@/components/upload/multiple-upload'
import draggable from "vuedraggable"
import Editor from '@/components/editor';
export default{
	data(){
		return {
			step: 0,
			//spu基本信息
			spuForm:{
				spuName:'', //商品名称：spu名称
				spuCaption:'', //商品副标题:spu副标题
				brandCode:'',  //品牌编号
				goodsWeight: 0, //商品重量
				masterImage:'', //商品主图,默认图
				categoryCode:'',//商品分类,只存储到三级分类编号
				rotateImageList:[], //商品图集:初始化spu图集,后续更改到sku对应的,在sku中可根据图集进行修改
				//积分设置信息 
				bounds:{
					integral: 0,    //积分
					growthValue: 0  //成长值
				},
				goodsParamsList:[], //paramter列表对象 用于存储商品参数信息
				goodsSpecList:[],   //spec列表对象,用于存储商品spec信息
				skuList:[],  //sku列表,针对spu中spec通过笛卡尔积所计算出来的赋值
				goodsPrice:'', //商品价格 初始化价格针对sku进行赋值,在sku中可以针对价格进行修改
				goodsUnit:'', //计量单位:用于标注当前商品是什么样的,件、份、包、个等等,v0.0.1版本中不针对计量单位做组合处理
				isMarketable:1,//是否上架 1.上架 2.下架
				spuInfoHtml:'', //商品详情 html格式
				spuInfoImage:[], //商品详情 image格式
				spuInfoType: 1 ,//商品详情 类别  1.图片格式 2.富文本格式
				templateCode: ''
			},
			spuBaseInfoRules:{
				spuName: [
					{ required: true, message: "请输入商品名字", trigger: "blur" }
				],
				spuCaption: [
					{ required: true, message: "请编写一个简单描述", trigger: "blur" }
				],
				brandCode: [
					{ required: true, message: "请选择一个品牌", trigger: "blur" }
				],
				categoryCode: [
					{ required: true, message: "请选择一个商品分类", trigger: "blur" }
				],
				// rotateImageList: [
				// 	{ required: true, message: "请上传商品图片集", trigger: "blur" }
				// ],
				goodsWeight: [
					{
						type: "number",
						required: true,
						message: "请填写正确的重量值",
						trigger: "blur"
					}
				]
			},
			categoryCodeArray:[],
			categorySetting: {
				value: "code",
				label: "categoryName",
				children: "children",
			},
			showAddRelationButton: false, //是否显示品牌分类关联按钮
			uploadSetting:{
				uploadType:'eyeglass-user',
				maxUploadCount:5,
				maxUploadSize:1,
				uploadAcceptType:['image/jpeg','image/jpg','image/png'],
				spuInfoMaxUploadCount:5
			},
			activeName:'paramters',
			returnData:{
				brandOptions:[],
				categoryOptions:[],
				specOptions:[],
				paramsOptions:[],
				tempSpecOptions:[],
				skuTableColumn:[],
			},
			inputVisible: [],
			inputValue: [],
			generatorDdescartes:true,
			checkPointMaxValue:true,
			skuUploadImageList:[],
			changeSkuIndex:'',
			spuInfoUploadImageList:[],//商品描述图片上传
			dialogImageVisible:false, //查看图片大图
			dialogImageUrl:'' ,//查看图片大图 图片地址
			drag:false //拖拽效果是否开启
		}
	},
	components:{
		MultipleUpload,
		draggable,
		Editor
	},
	computed:{
		dragOptions() {
			return {
				animation: 200,
				group: "description",
				disabled: false,
				ghostClass: "ghost"
			};
		}	
	},
	created() {
		this.initCategoryTree()
	},
	mounted() {
		//初始化专区管理
		this.initTopic()
	},
	watch: {
		//分类树选择监听
		categoryCodeArray(val) {
			if(val.length > 0){
				this.spuForm.categoryCode = val[val.length - 1]
				let params = {
					categoryCode: val[val.length - 1]
				}
				findRelationBrandCategoryList(params).then(res =>{
					this.returnData.brandOptions = res.data.responseData
				})
				this.showAddRelationButton = true
			}else{
				this.showAddRelationButton = false
			}
		},
		//sku下图片上传监听
		skuUploadImageList(val){
			let changeIndex = this.changeSkuIndex
			this.spuForm.skuList[changeIndex].skuRotateImageList.push(
				{imgUrl: val[0], defaultImg: 0}
			)
		},
		//spu下图片上传监听
		spuInfoUploadImageList(val){
			this.spuForm.spuInfoImage.push(val[0])
		}
	},
	methods:{
		addAgian() {
			this.step = 0;
			this.initSpuForm();
		},
		//初始化spu表单信息
		initSpuForm(){
			this.spuForm = {
				spuName:'', //商品名称：spu名称
				spuCaption:'', //商品副标题:spu副标题
				brandCode:'',  //品牌编号
				goodsWeight: 0, //商品重量
				masterImage:'', //商品主图,默认图
				categoryCode:'',//商品分类,只存储到三级分类编号
				rotateImageList:[], //商品图集:初始化spu图集,后续更改到sku对应的,在sku中可根据图集进行修改
				//积分设置信息 
				bounds:{
					integral: 0,    //积分
					growthValue: 0  //成长值
				},
				goodsParamsList:[], //paramter列表对象 用于存储商品参数信息
				goodsSpecList:[],   //spec列表对象,用于存储商品spec信息
				skuList:[],  //sku列表,针对spu中spec通过笛卡尔积所计算出来的赋值
				goodsPrice:'', //商品价格 初始化价格针对sku进行赋值,在sku中可以针对价格进行修改
				goodsUnit:'', //计量单位:用于标注当前商品是什么样的,件、份、包、个等等,v0.0.1版本中不针对计量单位做组合处理
				isMarketable:1,//是否上架 1.上架 2.下架
				spuInfoHtml:'', //商品详情 html格式
				spuInfoImage:[], //商品详情 image格式
				spuInfoType: 1 ,//商品详情 类别  1.图片格式 2.富文本格式
				templateCode:'',
			}
			this.categoryCodeArray = []
			this.skuUploadImageList = []
			this.spuInfoUploadImageList = []
			this.changeSkuIndex = ''
		},
		up(index){
			var that = this
			// 开启延时器，300ms的间隔区分单击和双击，解决双击时执行两次单击事件
			clearTimeout(that.time)
			that.time = setTimeout(() => {
				this.changeSkuIndex = index
			},300)
		},
		//初始化分类树
		initCategoryTree(){
			findCategoryTree().then(res =>{
				this.returnData.categoryOptions = this.getTreeData(res.data.responseData)
			})
		},
		getTreeData(data){
			for(var i=0;i<data.length;i++){
				if(data[i].children.length<1){
					data[i].children=undefined;
				}else {
					this.getTreeData(data[i].children);
				}
			}
			return data;
		},
		//下一步：设置基本参数
		collectSpuBaseInfo(){
			this.$refs.spuBaseForm.validate(valid => {
				if (valid) {
					this.step = 1;
					this.showSpecParams(this.spuForm.categoryCode);
				} else {
					return false;
				}
			});
		},
		//获取当前分类可以使用的销售属性
		showSpecParams(val){
			findTemplateRelationInfo(val).then(res =>{
				this.returnData.paramsOptions = res.data.responseData.goodsParamsDTOList
				this.returnData.specOptions = res.data.responseData.goodsSpecDTOList
				res.data.responseData.goodsSpecDTOList.forEach(item =>{
					this.returnData.tempSpecOptions.push({
						specId:item.id,
						specName:item.specName,
						specValue:[]
					})
					this.inputVisible.push({ view: false });
					this.inputValue.push({ val: "" });
				})
				console.log(this.returnData.specOptions)
			})
		},
		getParamInputList(val){
			return val.split(',');
		},
		getSpecInputList(val){
			return val.split(',');
		},
		//显示输入内容
		showInput(idx) {
			console.log("``````", this.view);
			this.inputVisible[idx].view = true;
		},
		//自定义输入内容提交
		handleInputConfirm(idx) {
			let inputValue = this.inputValue[idx].val;
			if (inputValue) {
				// this.dynamicTags.push(inputValue);
				if (this.returnData.specOptions[idx].options == "") {
					this.returnData.specOptions[idx].options = inputValue;
				} else {
					this.returnData.specOptions[idx].options += "," + inputValue;
				}
			}
			this.inputVisible[idx].view = false;
			this.inputValue[idx].val = "";
		},
		//生成sku信息
		generateSkus(){
			console.log('生成sku属性')
			this.step = 2
			
			//选择的paramer属性拼接并赋值到skuForm中
			this.spuForm.goodsParamsList = [];
			this.returnData.paramsOptions.forEach(item =>{
				console.log(item)
				let { id,paramsValue ,paramsName} = item
				if(paramsValue != "" && paramsValue != undefined){
					console.log('paramsValue',paramsValue)
					if(paramsValue instanceof Array){
						paramsValue = paramsValue.join(",");
					}
					this.spuForm.goodsParamsList.push(
						{id,paramsValue,paramsName}
					)
				}
			})
			console.log("baseAttrs", this.spuForm.goodsParamsList);
			
			//根据笛卡尔积运算进行生成sku
			let selectValues = []; //选中的属性值
			this.returnData.skuTableColumn = [],
			//获取所有选中的sku信息,并赋值到skuTableColumn中
			this.returnData.tempSpecOptions.forEach(item => {
				if (item.specValue.length > 0) {
					selectValues.push(item.specValue);
					this.returnData.skuTableColumn.push(item);
				}
			});
			//根据选中的值 采用笛卡尔积进行sku组合
			let descartes = this.descartes(selectValues);
			console.log("生成的组合", JSON.stringify(descartes));
			//定义sku对象 有多少descartes就有多少sku
			let skuList = [];
			//构造sku列表
			descartes.forEach(descarte =>{
				let skuArray = []; //定义sku属性组
				//构造spec属性集合
				descarte.forEach((d,index) =>{
					let specItem = {
						specId: this.returnData.skuTableColumn[index].specId,
						specName: this.returnData.skuTableColumn[index].specName,
						specValue: d
					};
					skuArray.push(specItem);
				})
				//初始化sku图片信息把前面所上传的商品图集赋值进来,
				let skuRotateImageList = [];
				this.spuForm.rotateImageList.forEach(item => {
					skuRotateImageList.push({imgUrl: item, defaultImg: 0})
				});
				//默认第一张图为商品主图,可自己更改
				skuRotateImageList[0].defaultImg = 1
				//初始化会员价格:v0.0.1版本不设置会员
				let oldSkuList = this.hasSkuList(this.spuForm.skuList, descarte);
				if(oldSkuList == null){
					
					//初始化sku信息,用于生成后的展示
					skuList.push({
						"skuName":this.spuForm.spuName + " " + descarte.join(" "),
						"goodsPrice":this.spuForm.goodsPrice,
						//sku标题,可以进行修改,默认值为spuName+spec
						//spuName:Apple iPhone 11 (A2223)
						//spceName:128GB 紫色
						//组合且修改后 Apple iPhone 11 (A2223) 128GB 紫色 移动联通电信4G手机 双卡双待
						//其中 移动联通电信4G手机 双卡双待 为自己添加进去的
						"skuTitle":this.spuForm.spuName + " " + descarte.join(" "),
						//副标题:用于商品的简单描述或者参与的活动,可以为链接,可以为文字v0.0.1版本仅支持文字
						//现正式推出iPhone11短租服务，用机无需付全款，3期租赁更灵活
						"skuSubtitle":'',
						//当前sku所包含的spec参数组合
						descar: descarte,
						//商品库存,默认为0可以进行修改,后续在可以配合仓储管理进行商品出入库维护,v0.0.1版本中
						"stockNum":0, 
						//商品预警库存,在sku库存达到临界点的时候进行通知,可设置达到临界点的时候是否进行下架处理
						"alertStockNum":0,
						//商品条形码,可以通过扫码进行快速查找
						"goodsBarCode":'',
						"skuRotateImageList":skuRotateImageList
					})
				}else{
					skuList.push(oldSkuList)
				}
				//把组装好的sku信息赋值给spuForm下的skuList
				this.spuForm.skuList = skuList;
				console.log("结果!!!", this.spuForm.skuList, this.returnData.skuTableColumn);
			})
		},
		//笛卡尔积计算sku组合
		descartes(selectValues){
			var result = [];
			if(selectValues.length == 1){
				result = selectValues;
			}else if(selectValues.length == 2){
				for(let i = 0 ; i <selectValues[0].length;i++){
					for(let j = 0 ; j <selectValues[1].length ; j++){
						let templateData = []
						templateData.push(selectValues[0][i])
						templateData.push(selectValues[1][j])
						result.push(templateData)
					}
				}
			}else if(selectValues.length == 3){
				for(let i = 0 ; i <selectValues[0].length;i++){
					for(let j = 0 ; j <selectValues[1].length ; j++){
						for(let k = 0 ; k <selectValues[2].length;k++){
							let templateData = []
							templateData.push(selectValues[0][i])
							templateData.push(selectValues[1][j])
							templateData.push(selectValues[2][k])
							result.push(templateData)
						}
					}
				}
			}
			return result;
		},
		//判断如果包含之前的sku的descar组合，就返回这个sku的详细信息；
		hasSkuList(skus,descar){
			let skuList = null;
			if(skus.length > 0){
				for(let i = 0 ; i <skus.length ; i++){
					if (skus[i].descar.join(" ") == descar.join(" ")) {
						//重新赋值商品图集
						let newSkuRotateImageList = []
						this.spuForm.rotateImageList.forEach(item => {
							newSkuRotateImageList.push({imgUrl: item, defaultImg: 0})
						});
						skus[i].skuRotateImageList = newSkuRotateImageList
						skuList = skus[i];
					}
				}
			}
			return skuList;
		},
		//设置主图
		setDefalutImage(img,index,skuRotateImageList){
			skuRotateImageList.forEach(item =>{
				if(item == img){
					item.defaultImg = 1
				}else{
					item.defaultImg = 0
				}
			})
		},
		//移除图片
		removeImage(index,skuRotateImageList){
			skuRotateImageList.splice(index,1)
		},
		//spuInfo移除图片
		removeSpuInfoImage(val){
			this.spuForm.spuInfoImage.splice(val,1)
		},
		//查看spuInfo图片大图
		viewSpuInfoImage(val){
			this.dialogImageVisible = true
			this.dialogImageUrl = val
		},
		initTopic(){
			
		},
		//关联专区
		relationTopics(){
			
		},
		//商品描述 html模式,图片组合模式,根据自定义选择
		generateSpuInfo(){
			this.step = 3
		},
		saveGoods(){
			console.log("~~~~~", JSON.stringify(this.spuForm));
			this.$confirm("将要提交商品数据，需要一小段时间，是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}).then(() => {
				addGoods(this.spuForm).then(res =>{
					if(res.data.responseCode == '200'){
						this.$message({
							type: "success",
							message: "新增商品成功!"
						});
						this.step = 4;
					}
				}).catch(err =>{
					this.$message.error(err.data.responseMessage)
				})
			}).catch(e => {
				console.log(e);
				this.$message({
					type: "info",
					message: "已取消"
				});
			});
		},
	}
}	
</script>
<style scoped="scoped">
.corner-marker {
	position: absolute;
	right: -15px;
	top: -6px;
	width: 40px;
	height: 24px;
	background: #FFFFFF;
	text-align: center;
	transform: rotate(45deg);
	box-shadow: 0 0 1pc 1px rgba(0,0,0,.2);
}
.corner-marker-image{
	display: inline-block;
	width: 40px;
	height: 40px;
	background-image: url(../../../../assets/image/moren.png);
	background-position: center;
	background-size: 35px 35px;
	background-repeat: no-repeat;
	position: absolute;
	top: -3px;
	right: 2px;
}
.aaa{
	overflow: hidden;
	background-color: #fff;
	border: 1px solid #c0ccda;
	border-radius: 6px;
	box-sizing: border-box;
	width: 148px;
	height: 148px;
	margin: 0 8px 8px 0;
	display: inline-block;
	position: relative;
}
.aaa a:hover .image-mask{
	opacity: 1;
}
.corner-marker {
    display: block;
}

.corner-marker i {
    font-size: 12px;
    margin-top: 11px;
    transform: rotate(-45deg);
}
.el-icon-check{
	color: #fff;
}
.input-box {
	width: 80%;
}  

.el-upload--picture-card {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 148px;
    height: 148px;
    line-height: 146px;
    vertical-align: top;
}

.image-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    cursor: default;
    text-align: center;
    color: #fff;
    opacity: 0;
    font-size: 20px;
    background-color: rgba(0,0,0,.5);
    transition: opacity .3s;
	display: flex;
	flex-direction: row;
}
.ddd {
    width: 100%;
    height: 100%;
	position: relative;
}
.image-mask::after {
    display: inline-block;
    content: "";
    height: 100%;
    vertical-align: middle;
}
.image-mask span {
    display: block;
    cursor: pointer;
	margin:  40% auto;
}
.image-mask .el-upload-list__item-delete {
    position: static;
    font-size: inherit;
    color: inherit;
}
.add{
	padding-left: 20px;
}
.delete{
	padding-right: 20px;
}

#图片右上角图标

.el-upload-list--picture-card .corner-marker {
    position: absolute;
    right: -15px;
    top: -6px;
    width: 40px;
    height: 24px;
    background: #13ce66;
    text-align: center;
    transform: rotate(45deg);
    box-shadow: 0 0 1pc 1px rgba(0,0,0,.2);
}

.el-upload-list--picture-card {
    margin: 0;
    display: inline;
    vertical-align: top;
}


</style>